<template>
    <div class="slider-com">
        <el-slider v-model="value1" @input="changeValue" :min="min" :max="max" :step="step" :show-tooltip="false"/>
        <div class="rangeNum">{{ timeStr }}</div>

    </div>
</template>
<script setup>
import { ref } from 'vue'

const prop = defineProps({
    defaultValue:{
        type: Number,
        default: 0,
    },
    min: {
        type: Number,
        default: 0,
    },
    max: {
        type: Number,
        default: 100,
    },
    step: {
        type: Number,
        default: 1,
    },
})

const emit = defineEmits(['changeValue'])
const changeValue = (val)=> {
    emit('changeValue', val)
}


const value1 = ref(prop.defaultValue)

</script>
<style scoped>
.slider-com{
    display: flex;
    gap: 10px;
}
</style>